@import './variables.scss';

// Mixins
@mixin flex-center {
  display: flex;
  align-items: center;
  justify-content: center;
}

@mixin flex-between {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

@mixin text-ellipsis {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

@mixin multi-ellipsis($lines) {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: $lines;
  overflow: hidden;
}

@mixin scrollbar {
  &::-webkit-scrollbar {
    width: 6px;
    height: 6px;
  }
  
  &::-webkit-scrollbar-thumb {
    background: var(--el-border-color-light);
    border-radius: $border-radius-small;
    
    &:hover {
      background: var(--el-border-color);
    }
  }
  
  &::-webkit-scrollbar-track {
    background: var(--el-fill-color-blank);
  }
}

// 布局类
.app-container {
  width: 100%;
  height: 100%;
  overflow: hidden;
  position: relative;
}

.main-container {
  height: 100%;
  transition: margin-left $transition-duration;
  background-color: var(--el-bg-color-page);
}

// Flex 布局类
.flex {
  display: flex !important;
  
  &-inline {
    display: inline-flex !important;
  }
  
  &-column {
    flex-direction: column !important;
  }
  
  &-wrap {
    flex-wrap: wrap !important;
  }
  
  &-center {
    @include flex-center;
  }
  
  &-between {
    @include flex-between;
  }
  
  &-start {
    align-items: flex-start !important;
  }
  
  &-end {
    align-items: flex-end !important;
  }
  
  &-1 {
    flex: 1 !important;
  }
  
  &-auto {
    flex: auto !important;
  }
  
  &-none {
    flex: none !important;
  }
}

// 间距类
@each $prop, $abbrev in (margin: m, padding: p) {
  @each $size, $value in (
    0: 0,
    1: $spacing-mini,
    2: $spacing-xs,
    3: $spacing-sm,
    4: $spacing-base,
    5: $spacing-lg,
    6: $spacing-xl,
    7: $spacing-xxl
  ) {
    .#{$abbrev}-#{$size} { #{$prop}: $value !important; }
    .#{$abbrev}t-#{$size} { #{$prop}-top: $value !important; }
    .#{$abbrev}r-#{$size} { #{$prop}-right: $value !important; }
    .#{$abbrev}b-#{$size} { #{$prop}-bottom: $value !important; }
    .#{$abbrev}l-#{$size} { #{$prop}-left: $value !important; }
    .#{$abbrev}x-#{$size} {
      #{$prop}-left: $value !important;
      #{$prop}-right: $value !important;
    }
    .#{$abbrev}y-#{$size} {
      #{$prop}-top: $value !important;
      #{$prop}-bottom: $value !important;
    }
  }
}

// 文本类
.text {
  &-left { text-align: left !important; }
  &-center { text-align: center !important; }
  &-right { text-align: right !important; }
  &-justify { text-align: justify !important; }
  
  &-wrap { white-space: normal !important; }
  &-nowrap { white-space: nowrap !important; }
  &-break { word-break: break-all !important; }
  
  &-ellipsis { @include text-ellipsis; }
  &-ellipsis-2 { @include multi-ellipsis(2); }
  &-ellipsis-3 { @include multi-ellipsis(3); }
  
  @each $size, $value in (
    xs: $font-size-extra-small,
    sm: $font-size-small,
    base: $font-size-base,
    md: $font-size-medium,
    lg: $font-size-large,
    xl: $font-size-extra-large
  ) {
    &-#{$size} { font-size: $value !important; }
  }
  
  @each $weight, $value in (
    thin: 300,
    regular: 400,
    medium: 500,
    semibold: 600,
    bold: 700
  ) {
    &-#{$weight} { font-weight: $value !important; }
  }
  
  &-primary { color: var(--el-color-primary) !important; }
  &-success { color: var(--el-color-success) !important; }
  &-warning { color: var(--el-color-warning) !important; }
  &-danger { color: var(--el-color-danger) !important; }
  &-info { color: var(--el-color-info) !important; }
  &-regular { color: var(--el-text-color-regular) !important; }
  &-secondary { color: var(--el-text-color-secondary) !important; }
  &-placeholder { color: var(--el-text-color-placeholder) !important; }
}

// 背景类
.bg {
  &-primary { background-color: var(--el-color-primary) !important; }
  &-success { background-color: var(--el-color-success) !important; }
  &-warning { background-color: var(--el-color-warning) !important; }
  &-danger { background-color: var(--el-color-danger) !important; }
  &-info { background-color: var(--el-color-info) !important; }
  &-page { background-color: var(--el-bg-color-page) !important; }
  &-overlay { background-color: var(--el-bg-color-overlay) !important; }
  
  &-transparent { background-color: transparent !important; }
}

// 边框类
.border {
  border: 1px solid var(--el-border-color) !important;
  
  &-0 { border: 0 !important; }
  
  &-top { border-top: 1px solid var(--el-border-color) !important; }
  &-right { border-right: 1px solid var(--el-border-color) !important; }
  &-bottom { border-bottom: 1px solid var(--el-border-color) !important; }
  &-left { border-left: 1px solid var(--el-border-color) !important; }
  
  &-top-0 { border-top: 0 !important; }
  &-right-0 { border-right: 0 !important; }
  &-bottom-0 { border-bottom: 0 !important; }
  &-left-0 { border-left: 0 !important; }
}

// 圆角类
.rounded {
  &-sm { border-radius: $border-radius-small !important; }
  &-base { border-radius: $border-radius-base !important; }
  &-lg { border-radius: $border-radius-large !important; }
  &-xl { border-radius: $border-radius-extra-large !important; }
  &-circle { border-radius: 50% !important; }
  &-pill { border-radius: 9999px !important; }
  &-0 { border-radius: 0 !important; }
}

// 阴影类
.shadow {
  &-none { box-shadow: none !important; }
  &-sm { box-shadow: $shadow-light !important; }
  &-base { box-shadow: $shadow !important; }
  &-lg { box-shadow: $shadow-dark !important; }
}

// 定位类
.position {
  &-static { position: static !important; }
  &-relative { position: relative !important; }
  &-absolute { position: absolute !important; }
  &-fixed { position: fixed !important; }
  &-sticky { position: sticky !important; }
}

// 显示类
.d {
  &-none { display: none !important; }
  &-inline { display: inline !important; }
  &-inline-block { display: inline-block !important; }
  &-block { display: block !important; }
  &-grid { display: grid !important; }
  &-table { display: table !important; }
  &-table-cell { display: table-cell !important; }
}

// 溢出类
.overflow {
  &-auto { overflow: auto !important; }
  &-hidden { overflow: hidden !important; }
  &-visible { overflow: visible !important; }
  &-scroll { overflow: scroll !important; }
  &-x-auto { overflow-x: auto !important; }
  &-y-auto { overflow-y: auto !important; }
  &-x-hidden { overflow-x: hidden !important; }
  &-y-hidden { overflow-y: hidden !important; }
}

// 鼠标类
.cursor {
  &-pointer { cursor: pointer !important; }
  &-default { cursor: default !important; }
  &-not-allowed { cursor: not-allowed !important; }
  &-wait { cursor: wait !important; }
  &-text { cursor: text !important; }
  &-move { cursor: move !important; }
  &-help { cursor: help !important; }
}

// 响应式工具类
@each $breakpoint in (xs, sm, md, lg, xl) {
  @include respond-to($breakpoint) {
    .d-#{$breakpoint} {
      &-none { display: none !important; }
      &-inline { display: inline !important; }
      &-inline-block { display: inline-block !important; }
      &-block { display: block !important; }
      &-flex { display: flex !important; }
      &-grid { display: grid !important; }
    }
    
    .flex-#{$breakpoint} {
      &-row { flex-direction: row !important; }
      &-column { flex-direction: column !important; }
      &-wrap { flex-wrap: wrap !important; }
      &-nowrap { flex-wrap: nowrap !important; }
    }
    
    .text-#{$breakpoint} {
      &-left { text-align: left !important; }
      &-center { text-align: center !important; }
      &-right { text-align: right !important; }
    }
  }
}

// 动画类
.transition {
  transition: all $transition-duration $transition-timing-function !important;
  
  &-fast {
    transition: all $animation-duration-fast $transition-timing-function !important;
  }
  
  &-slow {
    transition: all $animation-duration-slow $transition-timing-function !important;
  }
}

// 变换类
.transform {
  &-none { transform: none !important; }
  &-scale-hover {
    transition: transform $transition-duration $transition-timing-function;
    &:hover { transform: scale(1.05) !important; }
  }
  &-translate-hover {
    transition: transform $transition-duration $transition-timing-function;
    &:hover { transform: translateY(-2px) !important; }
  }
}

// 可见性类
.visible { visibility: visible !important; }
.invisible { visibility: hidden !important; }

// z-index 类
@for $i from -1 through 10 {
  .z-#{$i} { z-index: $i !important; }
}

// 列表样式
.list {
  &-none { list-style: none !important; }
  &-disc { list-style-type: disc !important; }
  &-circle { list-style-type: circle !important; }
  &-square { list-style-type: square !important; }
  &-decimal { list-style-type: decimal !important; }
}

// 浮动类
.float {
  &-left { float: left !important; }
  &-right { float: right !important; }
  &-none { float: none !important; }
}

// 清除浮动
.clearfix {
  &::after {
    content: '';
    display: table;
    clear: both;
  }
}

// 滚动条样式
.scrollbar {
  @include scrollbar;
}

// 禁用类
.disabled {
  cursor: not-allowed !important;
  opacity: 0.65 !important;
  pointer-events: none !important;
}

// 透明度类
@for $i from 0 through 10 {
  .opacity-#{$i} {
    opacity: $i * 0.1 !important;
  }
} 